<template>
    <div class="dq">
        <p STYLE=" position:absolute;color: rgba(215,222,241,0.44); top:70px;z-index:-1;font-size:80px">LOGIN</p>
        <div class="dl">登录</div>
        <van-form >
        <van-field
                v-model="username"
                name="用户名"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"/>
        <van-field
                v-model="password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"/>
            <div style="margin: 16px;">
            <van-button round block type="danger" native-type="submit" @click="onCliok">提交</van-button>
        </div>
    </van-form>

        <div class="ch" >还没有账号？<span><router-link to="/zhuce">马上注册</router-link></span>
        </div>
    </div>

</template>

<script>
/*  import axios from 'axios'*/
  import { Notify } from 'vant';
  //   @  =  src
  import {login} from '@/api/login.js'

import {mapMutations} from 'vuex'
    export default {
        name: "login",
    data() {
        return {
            text:'内容',
            username: '',
            password: '',
        };
    },
    methods: {
        ...mapMutations(['setToken']),
        onSubmit(values){
            console.log('submit',values)
        },
        onCliok(){
            console.log("用户点击了提交按钮")
            //用户输入的用户名和密码
            var username = this.$data.username
            var password =this.$data.password

            var data ={
                username:username,
                password:password,
            }
            //模块化
            login(data).then(res =>{
                console.log(res)

                var  a = res.data
                console.log(a)
                //a
                var success = a.success

                // var msg =da.msg
                // console.log(res.data)

                if(success == true){
                    var adata = a.data

                    var token = adata.token
                  //修改前
                    // var juToken =this.$store.state.token
                    // console.log(juToken)

                    //修改后
                    this.setToken(token)

                    //登录这个操作已经完成
                    sessionStorage.setItem("logined",true)

                    var quanjuToken =this.$store.state.token
                    console.log(quanjuToken)
                    //登录成功
                    Notify(res.data.msg);
                    this.$router.replace("home")//跳转
                }else {
                    //登录失败
                    //提示用户 登录失败并告知登录失败的原因
                    //Notify(msg);
                }


            })

            //     this.$router.replace('/home')//跳转
            // })
        },
            // //把用户名和密码提交到后端，判断是否可以登录
            // axios({
            //     url:"http://192.168.40.177:8008/api/login",
            //     methods: 'post',
            //     data:{
            //         username:username,
            //         password:password,
            //     }
            // }).then(res =>{
            //     console.log(res);
            //     var  da =res.data
            //
            //     console.log(da)
            //
            //     var success = da.success
            //     var msg =da.msg
            //
        //    if(success == true){
        //     //登录成功
        //   }else {
        //      //登录失败
        //        //提示用户 登录失败并告知登录失败的原因
        //       Notify(msg);
        //    }
        //     //     this.$router.replace('/home')//跳转
        //     // })
        // },

        // onSubmit(values) {
        //     console.log('submit', values);
        // },
        // mscz(){
        //     this.$router.push({
        //         path: '/zhuce',
        //         // query:{参数的意思
        //         //
        //         // }
        //         })
        // }
        },
        updated() {
            console.log(this.$data.username)
        }
    }
</script>

<style scoped>

    .dl{
        margin: 0 0  40px 0;
        color: #0c0c0c;}
    .dq{
        margin: 180px 0 5px  20px;
        font-size: 24px;

    }
    van-form{
        width: 350px;
        margin: 0 auto;
    }
    .ch{
        position: absolute;
        left: 20px;
        bottom: 10px;
        width: 100%;
        font-size: 5px;
        color: #606266;
        text-align: center;

    }

</style>